<li id="recNamefilter" style="display: list-item;position: relative;">
    <label>收款人:</label>
    <span id="recName">
        <span class="ui-combo-wrap" style="width: 255px;">
            <input type="text" class="input-txt" autocomplete="off" readonly="readonly" style="cursor: default; width: 225px !important;" id="recNameName">
            <span class="trigger" id="recNameTrigger"></span>
        </span>
    </span>


    <div class="ui-droplist-wrap" id="recNameBox" style="position: absolute; z-index: 1000; width: 255px; display: none;left: 80px;top: calc(100% + 2px); ">
        <div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
            <div class="list-item selected" data-value="0" title="空">空</div>
            <div class="list-item" data-value="1" title="张三">张三</div>
            <div class="list-item" data-value="2" title="李四">李四</div>
            <div class="list-item" data-value="3" title="王二">王二</div>
            <div class="list-item" data-value="4" title="麻子">麻子</div>
        </div>
    </div>
</li>

<input type="hidden" id="recNameId" value="">




<script type="text/javascript">
	$(document).ready(function () {

		// 点击选择收款人
		$("#recName").click(function(){
			$("#recNameBox").toggle();
		});
		// 收款人赋值
		$("#recNameBox .list-item").click(function(){
			$("#recNameName").val($(this).attr("title"));
			$("#recNameId").val($(this).attr("data-value"));
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#recNameBox").hide();
		});
	});

	//选择收款人-选择框外点击则隐藏
    $(document).mouseup(function (e) {
      if(e.target.id!="recNameName" && e.target.id!="recNameTrigger"){
            var con = $("#recNameBox");   // 设置目标区域
            if (!con.is(e.target) && con.has(e.target).length === 0) {
              $("#recNameBox").hide();
            }
        } 
    });
</script>



